import React from 'react'
import './Home.css'
import HomeHead from './HomeHead'
import { useNavigate, Link } from 'react-router-dom';

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      num: 1,
      fname: "我是渣渣辉",
      sondata: ""
    }
  }
  jiedata = (zname) => {
    console.log("-------", zname)
    // zname 事件函数形参 就是子组件传来的数据
    this.setState({
      sondata: zname,
      flag: true
    })
  }
  changeFlag = () => {
    this.setState({
      flag: !this.state.flag
    })
  }
  // 跳转购物车页面
  turnCart = () => {
    // 通过组合组件 传递到props上的navigate方法
    this.props.navigate("/cart", { state: "白酒1斤半，啤酒随便灌" })
  }
  render () {
    let divs = ""
    if (this.state.flag) {
      divs = <div>显示隐藏</div>
    } else {
      divs = ""
    }
    return (
      <div>
        <h1>我是主页</h1>
        <button onClick={this.turnCart}>去到购物车页面</button>
        <h1>{this.state.sondata}</h1>
        {divs}
        {this.state.flag && <div>表达式为真 显示 </div>}
        <h1>{this.state.flag ? <a>腾讯</a> : <a>steam</a>}</h1>
        <button onClick={this.changeFlag}>切换显示隐藏</button>
        {/* 组件式跳转并传参 */}
        <Link to={{ pathname: "/mine/1899", state: { a: 1, b: 2 } }}>去到个人中心</Link>
        <hr />
        {/* 父组件绑定一个 send事件 触发事件函数 接受值 */}
        <HomeHead send={this.jiedata} myname={this.state.fname} />
      </div>
    )
  }
}
// 组合组件
function WithRouter () {

  return <Home navigate={useNavigate()}>
  </Home>
}

export default WithRouter
// export default Home

//面试题 xmind 49到 手写一遍
// react 练习
// 代码作业：react 做一个todolist
// 预习 react-router-dom6
// 预习redux